<template>
  <div class="app-container">
    <div class="filter-container">
      <p>说明：选择离职名单导入系统，系统会根据离职名单改变对应用户状态。</p>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-upload" @click="handleUpload">导入离职文件</el-button>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="导入离职文件">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 300px; margin-left:50px;">
        <el-form-item :label-width="formLabelWidth" label="选择文件">
          <el-upload :file-list="temp.fileList" :action="host+'/admin/rddWithdrawal'" :headers="headers" :limit="1" :on-success="handleSuccess" class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmHandler">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
export default {
	name: "ComplexTable",
	filters: {
	},
    directives: { waves },
	data() {
	    return{
            dialogFormVisible: false,
            downloadLoading: false,
            formLabelWidth: "60px",
            temp: {},
            headers: { Authorization: 'Bearer ' + this.$store.state.user.token },
            host: process.env.BASE_API,
            rules: {}
        }
	},
	created() {
	},
	methods: {
		confirmHandler() {
			this.dialogFormVisible = false
		},
		handleSuccess(file, fileList) {
			this.temp.fileList = [];
			this.temp.fileList.push({
				name: fileList.name,
				url: file.data.file
			})
		},
		handleUpload() {
			this.temp = {};
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields();
			});
		}
	}
};
</script>
